<template>
  <div id="map"></div>
  <div id="info">&nbsp;</div>
</template>

<script setup>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import Feature from "ol/Feature";
import Layer from "ol/layer/Layer.js";
import TileLayer from "ol/layer/Tile";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import WebGLPointsLayer from "ol/layer/WebGLPoints.js";
import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer.js";
import { fromLonLat } from "ol/proj.js";
import { onMounted } from "@vue/runtime-core";
import nansha_data from "@/components/openlayers/draw-feature/nansha_data";
import arrow_png from "./arrow2.png";

let map;
let style;

// 创建地图容器
function initMap() {
  map = new Map({
    target: "map",
    // 天地图
    layers: [
      new TileLayer({
        source: new XYZ({
          url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        }),
      }),
    ],
    // 南沙区中心点
    view: new View({
      center: fromLonLat([113.44, 22.73]),
      zoom: 10,
    }),
  });
}
// 绘制线要素
function addLine() {
  const lineFeature = [];
  for (let i = 0; i <= nansha_data.pipe_vertices.length - 1; i++) {
    let res = [];
    nansha_data.pipe_vertices[i].forEach((item) => {
      res.push(fromLonLat([item[1], item[0]]));
    });
    lineFeature.push(
      new Feature({
        geometry: new LineString(res),
        name: "Line",
      })
    );
  }

  const getStyle = (
    dash,
    pattern,
    color = "rgba(24,86,34,0.7)",
    width = 5,
    capType = "butt"
  ) => {
    let newStyle = {
      variables: style
        ? style.variables
        : {
            width: width,
            offset: 0,
            capType: capType,
            joinType: "miter",
            miterLimit: 10, // ratio
            dashLength1: 2,
            dashLength2: 7,
            dashOffset: 0,
            patternOffset: [10, 10],
            patternSpacing: 30,
          },
      "stroke-width": ["var", "width"],
      "stroke-color": color,
      "stroke-offset": ["var", "offset"],
      "stroke-miter-limit": ["var", "miterLimit"],
      "stroke-line-cap": ["var", "capType"],
      "stroke-line-join": ["var", "joinType"],
    };
    if (dash) {
      newStyle = {
        ...newStyle,
        "stroke-line-dash": [
          ["var", "dashLength1"],
          ["var", "dashLength2"],
        ],
        "stroke-line-dash-offset": ["var", "dashOffset"],
      };
    }
    if (pattern) {
      delete newStyle["stroke-color"];
      newStyle = {
        ...newStyle,
        "stroke-pattern-src": arrow_png,
        "stroke-pattern-spacing": ["var", "patternSpacing"],
        "stroke-pattern-offset": [0, 0],
        "stroke-pattern-offset-origin": "top-left",
        "stroke-pattern-size": [50, 50],
      };
    }
    return newStyle;
  };

  // 虚线
  style = getStyle(true, false, "rgba(204,204,255,1)", 5, "round");
  // 贴图
  // style = getStyle(false, true, "rgba(204,204,255,1)", 10, "round");
  class WebGLLayer extends Layer {
    createRenderer() {
      return new WebGLVectorLayerRenderer(this, {
        className: this.getClassName(),
        style: [getStyle(false, false, "rgba(25,25,255,1)", 10, "butt"), style],
      });
    }
  }

  const vectorLayer = new WebGLLayer({
    source: new VectorSource({
      features: lineFeature,
    }),
  });
  map.addLayer(vectorLayer);

  setInterval(function () {
    const variables = style.variables;
    const variableName = "dashOffset";
    const offset =
      variables[variableName] == 8 ? 0 : variables[variableName] + 1;
    variables[variableName] = offset;
    map.render();
  }, 100);
}

onMounted(() => {
  initMap();
  addLine();
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
